<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
</head>
<body>
<section id="chat">
    <div class="chatBody"></div>
    <div><img src="images/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		var allImg=new Array("head01.jpg","head02.jpg","head03.jpg");
		var allName=new Array("时尚伊人","六月奇迹","松松");
		$("#send").click(function(){
			if($(".chatText").val().length>0){
				var inum=Math.floor(Math.random()*3);
				var chattext=$(".chatText").html();//获得聊天内容
				var divimg="<div><img src=images/"+allImg[inum]+"></div>"; //获得头像
				var yname="<p>"+allName[inum]+"</p>"; //获得昵称
				var neirong="<div>"+$(".chatText").val()+"</div>";
				var jianxun="<section>"+divimg+yname+neirong+"</section>";
				$(".chatBody").html(chattext+jianxun);
				$(".chatBody section div:last").addClass("chatContent");
				$(".chatText").val("");//清空
			}
		});
	});
</script>
</body>
</html>